<template>
	<view class="box">
		<view class="me">
			<block v-if="isLogin">
				<image :src="userInfo.head_pic" class="user-img" mode="" @click="$navTo('pages/mines/meInfo')"></image>
				<view class="name-phone" @click="$navTo('pages/mines/meInfo')">
					<view class="name">
						{{userInfo.nickname}}
					</view>
					<view class="phone">
						<image src="@/static/img/phone.png" mode=""></image>
						<view class="p">
							{{userInfo.mobile}}
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="name" style="font-size: 38rpx;" @click="clickLi">
					请先登录
				</view>
			</block>
			<image src="@/static/img/long.png" mode="" class="long"></image>

			<view class="in-box">
				<view class="order-box">
					<view class="title" style="display: flex;justify-content: space-between;align-items: center;">
						<view class="">
							我的订单
						</view>
						<view class="" style="color: #bfbfbf;font-size: 24rpx;font-weight: 400;"
							@click="$navTo('pages/mines/myOrder')">
							全部订单 >>
						</view>
					</view>
					<view class="topnav">
						<view class="li" v-for="(item,index) in textArr" :key="index"
							@click="$navTo('pages/mines/myOrder?type='+(index+1))">
							<image :src="`../../static/img/top${index}.png`" mode="aspectFit"></image>
							<view class="txt">
								{{item.name}}
							</view>
							<view v-if="item.num" class="order-type-num">
								{{item.num}}
							</view>
						</view>
					</view>
				</view>

				<image src="@/static/img/rentou.png" @click="$navTo('pages/mines/makeMoney')" class="rentou-img"
					mode="哦,还没加载吧,等等吧"></image>

				<view class="bottom-box">
					<view class="title">
						常用功能
					</view>
					<view class="bottom-nav" @tap="clickLi">
						<view class="li" data-id="makeMoney">
							<image src="@/static/img/q1.png" style="width: 34.46rpx;height: 39.94rpx;opacity: 1;" data-id="makeMoney"
								mode=""></image>
							<view class="txt" data-id="makeMoney">
								赚钱
							</view>
						</view>
						<view class="li" data-id="Collect">
							<image src="@/static/img/q2.png" style="width: 41.56rpx;height: 39.94rpx;opacity: 1;" data-id="Collect"
								mode=""></image>
							<view class="txt" data-id="Collect">
								我的收藏
							</view>
						</view>
						<view class="li" data-id="address">
							<image src="@/static/img/q3.png" style="width: 33.78rpx;height: 41.96rpx;opacity: 1;" data-id="address"
								mode=""></image>
							<view class="txt" data-id="address">
								我的地址
							</view>
						</view>
						<view class="li" data-id="priceList">
							<image src="@/static/img/q4.png" style="width: 42.22rpx;height: 34.71rpx;opacity: 1;" data-id="priceList"
								mode=""></image>
							<view class="txt" data-id="priceList">
								价格列表
							</view>
						</view>
						<!-- 	<view class="li" data-id="invoice">
							<image src="@/static/img/q5.png" style="width: 39.34rpx;height: 39rpx;opacity: 1;" data-id="invoice"
								mode=""></image>
							<view class="txt" data-id="invoice">
								开发票
							</view>
						</view> -->
						<view class="li" data-id="coupon">
							<image src="@/static/img/q6.png" style="width: 43.68rpx;height: 31.77rpx;opacity: 1;" mode=""
								data-id="coupon"></image>
							<view class="txt" data-id="coupon">
								优惠券
							</view>
						</view>
						<view class="li" data-id="welfare">
							<image src="@/static/img/q7.png" style="width: 35.67rpx;height: 36.2rpx;opacity: 1;" mode=""
								data-id="welfare"></image>
							<view class="txt" data-id="welfare">
								福利官
							</view>
						</view>
						<view class="li" data-id="problem">
							<image src="@/static/img/q8.png" mode="" style="width: 32.88rpx;height: 41.12rpx;opacity: 1;"
								data-id="problem"></image>
							<view class="txt" data-id="problem">
								常见问题
							</view>
						</view>
						<view class="li" data-id="feedback">
							<image src="@/static/img/q9.png" mode="" style="width: 37.03rpx;height: 40.14rpx;opacity: 1;"
								data-id="feedback"></image>
							<view class="txt" data-id="feedback">
								投诉反馈
							</view>
						</view>
						<view class="li" data-id="policy">
							<image src="@/static/img/q10.png" mode="" style="width: 28.95rpx;height: 36.44rpx;opacity: 1;"
								data-id="policy"></image>
							<view class="txt" data-id="policy">
								隐私条款
							</view>
						</view>
						<view class="li" data-id="cooperation">
							<image src="@/static/img/q11.png" mode="" style="width: 43.09rpx;height: 35.91rpx;opacity: 1;"
								data-id="cooperation"></image>
							<view class="txt" data-id="cooperation">
								商务合作
							</view>
						</view>
						<view class="li" data-id="meInfo">
							<image src="@/static/img/q12.png" style="width: 41.92rpx;height: 34.77rpx;opacity: 1;" mode=""
								data-id="meInfo"></image>
							<view class="txt" data-id="meInfo">
								个人资料
							</view>
						</view>
						<view v-if="isLogin" class="li" data-id="login">
							<image src="@/static/img/q13.png" style="width: 36.37rpx;height: 38.69rpx;opacity: 1;" mode=""
								data-id="login"></image>
							<view class="txt" data-id="login">
								退出登录
							</view>
						</view>

					</view>

				</view>
			</view>
		</view>
		<u-popup :show="showWelfare" mode="center" @open="showWelfareFn" @close="showWelfare=false">
			<view class="welfare">
				<image :src="qc_code" mode="" style="width: 100%;height: 100%;"></image>
			</view>
		</u-popup>
		<u-modal :show="showLogOut" closeOnClickOverlay title="退出登录" @close="showLogOut=false" @cancel="showLogOut=false"
			@confirm="handleLogOut" content='你真的要退出登录吗?' showCancelButton confirmText="傲娇退出" cancelText="后悔取消"></u-modal>
		<ContactBtn :is-dock="true" />
	</view>
</template>

<script>
	import ContactBtn from '@/components/ContactBtn.vue'
	import {
		whetherToLogin
	} from '@/utils/util'
	import {
		OrderApi,
		UserApi
	} from '@/api'
	export default {
		components: {
			ContactBtn
		},
		data() {
			return {
				textArr: [{
						key: 'wait_pay',
						name: '待付款',
						num: 0
					},
					{
						key: 'wait_ship',
						name: '待打印',
						num: 0
					},
					{
						key: 'wait_accept',
						name: '待收货',
						num: 0
					},
					{
						key: 'finish',
						name: '已完成',
						num: 0
					},
					{
						key: 'refund',
						name: '退款/售后',
						num: 0
					},
				],
				showWelfare: false, //福利官
				showLogOut: false, //退出登录提示
				qc_code: ''
			}
		},
		computed: {
			isLogin() {
				return this.$store.getters['token']
			},
			userInfo() {
				return this.$store.getters['userInfo']
			}
		},
		onShow() {
			this.getOrderNum()
		},
		methods: {
			getOrderNum() {
				OrderApi.UserOrderListTip()
					.then(res => {
						this.textArr = this.textArr.map(item => {
							return {
								...item,
								num: res.result[item.key]
							}
						})
					})
					.catch(err => {
						console.log('getOrderNum= ', err);
					})
			},
			clickLi(e) {
				const uid = e.target.dataset.id
				if (uid === 'welfare')
					return this.showWelfare = true
				if (!this.isLogin)
					return whetherToLogin()
				if (uid === 'login')
					return this.showLogOut = true
				this.$navTo('pages/mines/' + uid)
			},
			handleLogOut() {
				this.$store.commit('user/updateToken', false)
				this.$store.commit('user/updateUserInfo', {})
				this.showLogOut = false
				this.$showToast('退出成功')
			},
			async showWelfareFn() {
				try {
					const res = await UserApi.getWelfare()
					this.qc_code = res.result.qc_code
				} catch (e) {
					//TODO handle the exception
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.kefu {
		position: fixed;
		// right: 20rpx;
		// bottom: 70rpx;
		width: 142rpx;
		height: 112rpx;
		z-index: 4;
	}

	.welfare {
		width: 550rpx;
		height: 770rpx;
		background-color: #fff;
	}

	.me {
		width: 100vw;
		height: 300rpx;
		background-color: #fef2e6;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		position: relative;

		.in-box {
			position: absolute;
			left: 30rpx;
			top: 250rpx;
			z-index: 3;

			.bottom-box {
				width: 690rpx;
				height: 520rpx;
				border-radius: 23rpx;
				opacity: 1;
				background: #ffffff;
				padding: 30rpx;
				box-sizing: border-box;

				.bottom-nav {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.li {
						margin-top: 35rpx;
						text-align: center;
						flex: 0 0 20%;

						image {
							width: 38rpx;
							height: 40rpx;
						}

						.txt {
							color: #333333;
							text-align: center;
							font-size: 24rpx;
							font-weight: 400;
							margin-top: 25rpx;
						}
					}
				}

			}

			.rentou-img {
				width: 690rpx;
				height: 198rpx;
				border-radius: 17rpx;
				margin: 25rpx 0;
				opacity: 1;
			}

			.title {
				color: #333333;
				text-align: left;
				width: 100%;
				font-size: 32rpx;
				font-weight: 400;
			}

			.order-box {
				width: 690rpx;
				height: 251rpx;
				border-radius: 23.04rpx;
				opacity: 1;
				background: #ffffff;
				box-sizing: border-box;
				padding: 30rpx;

				.topnav {
					display: flex;
					align-items: center;
					justify-content: space-around;

					.li {
						position: relative;
						margin-top: 35rpx;
						text-align: center;

						image {
							width: 43rpx;
							height: 40rpx;
						}

						.txt {
							color: #333333;
							text-align: center;
							font-size: 24rpx;
							font-weight: 400;
							margin-top: 30rpx;
						}

						.order-type-num {
							position: absolute;
							right: -13rpx;
							top: -20rpx;
							width: 32rpx;
							height: 32rpx;
							background-color: #f56c6c;
							color: #fff;
							line-height: 32rpx;
							border-radius: 50%;
							text-align: center;
							font-size: 20rpx;
							z-index: 2;
						}
					}
				}
			}
		}



		.long {
			position: absolute;
			top: 14rpx;
			right: 141rpx;
			width: 231rpx;
			height: 279rpx;
			opacity: 0.46;
		}

		.user-img {
			width: 117rpx;
			height: 117rpx;
			border-radius: 50%;
			margin-right: 17rpx;

		}

		.name-phone {
			flex: 1;

			.name {
				font-size: 34rpx;
				font-weight: 400;
				margin-bottom: 28rpx;
			}

			.phone {
				display: flex;
				align-items: center;

				image {
					width: 18rpx;
					height: 24rpx;
					margin-right: 5rpx;
				}

				.p {
					font-size: 24rpx;
					font-weight: 400;
				}
			}
		}
	}
</style>